<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="设备类"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="deviceInfo">
      <hips-button @click="deviceInfoFuc">
        获取设备信息
      </hips-button>
    </demo-block>

    <demo-block title="copyClipboard">
      <hips-button @click="copyClipboardFuc">
        复制到剪贴板
      </hips-button>
    </demo-block>

    <demo-block title="pasteClipboard">
      <hips-button @click="pasteClipboardFuc">
        从剪贴板获取内容
      </hips-button>
    </demo-block>

    <demo-block title="beep">
      <hips-button @click="beepFuc">
        蜂鸣器提示
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';

import { Device } from '@hips/plugin-vue-jssdk';

const { deviceInfo, copyClipboard, pasteClipboard, beep } = Device;

export default {
  components: {
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {};
  },
  methods: {
    deviceInfoFuc() {
      deviceInfo()
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },

    copyClipboardFuc() {
      copyClipboard('测试一下');
    },
    pasteClipboardFuc() {
      pasteClipboard()
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
    beepFuc() {
      beep(2)
        .then((res) => {
          console.log('res = ', res);
        })
        .catch((err) => {
          console.log('err = ', err);
        });
    },
  },
};
</script>

<style lang="stylus"></style>
